<template>
  <div>
    <!-- 顶部操作部分 -->
    <div>
      <ButtonGroup size="default">
        <Button @click="addTestPaperFlag = true">新增考试</Button>
      </ButtonGroup>
      <br><br>
    </div>
    <!-- 搜索条件 -->
    <div v-if="searchable && searchPlace === 'top'" class="search-con search-con-top">
      考试计划名称:<Input clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue"/>
      <Button class="search-btn" type="primary"><Icon type="search"/>&nbsp;&nbsp;搜索</Button>
    </div>
    <div style="height: 20px"></div>
    <!-- 表格部分 -->
    <div>
      <Table :columns="insideColumns" :data="insideTableData" border stripe></Table>
    </div>
    <!-- 分页 -->
    <div>
      <Page :total="2" show-sizer show-total />
    </div>
    <!-- 新增考试的弹窗 -->
    <Modal
      v-model="addTestPaperFlag"
      title="新增考试计划"
      loading
      @on-ok="addTestPaperMethod">
      <!-- 新增的表单 -->
      <div>
        <Form :model="formItem" :label-width="150">
          <FormItem label="考试计划：">
            <Select v-model="formItem.type" style="width: 50%">
              <Option value="beijing">New York</Option>
              <Option value="shanghai">London</Option>
              <Option value="shenzhen">Sydney</Option>
            </Select>
          </FormItem>
          <FormItem label="考试开始时间：">
            <DatePicker type="datetime" placeholder="Select date and time" style="width: 50%"></DatePicker>
          </FormItem>
          <FormItem label="考试结束时间：">
            <DatePicker type="datetime" placeholder="Select date and time" style="width: 50%"></DatePicker>
          </FormItem>
          <FormItem label="考试时长：">
            <Input v-model="formItem.type"  disabled="" style="width: 50%"/>
          </FormItem>
          <FormItem label="试卷：">
            <Select v-model="formItem.type" style="width: 50%">
              <Option value="beijing">New York</Option>
              <Option value="shanghai">London</Option>
              <Option value="shenzhen">Sydney</Option>
            </Select>
          </FormItem>
          <FormItem label="补考试卷：">
            <Select v-model="formItem.type" style="width: 50%">
              <Option value="beijing">New York</Option>
              <Option value="shanghai">London</Option>
              <Option value="shenzhen">Sydney</Option>
            </Select>
          </FormItem>
          <FormItem label="考试名称：">
            <Input v-model="formItem.type" maxlength="30" placeholder="输入考试名称"  clearable style="width: 50%"/>
          </FormItem>
          <FormItem label="是否月考：">
            <i-switch v-model="formItem.switch" size="large">
              <span slot="open">On</span>
              <span slot="close">Off</span>
            </i-switch>
          </FormItem>
          <FormItem label="是否小测：">
            <i-switch v-model="formItem.switch" size="large">
              <span slot="open">On</span>
              <span slot="close">Off</span>
            </i-switch>
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script>
import './index.less'
export default {
  name: 'dzks',
  props: {
    value: {
      type: Array,
      default () {
        return []
      }
    },
    columns: {
      type: Array,
      default () {
        return []
      }
    },
    size: String,
    width: {
      type: [Number, String]
    },
    height: {
      type: [Number, String]
    },
    stripe: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: true
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    highlightRow: {
      type: Boolean,
      default: false
    },
    rowClassName: {
      type: Function,
      default () {
        return ''
      }
    },
    context: {
      type: Object
    },
    noDataText: {
      type: String
    },
    noFilteredDataText: {
      type: String
    },
    disabledHover: {
      type: Boolean
    },
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * @description 全局设置是否可编辑
     */
    editable: {
      type: Boolean,
      default: false
    },
    /**
     * @description 是否可搜索
     */
    searchable: {
      type: Boolean,
      default: true
    },
    /**
     * @description 搜索控件所在位置，'top' / 'bottom'
     */
    searchPlace: {
      type: String,
      default: 'top'
    }
  },
  /**
   * Events
   * @on-start-edit 返回值 {Object} ：同iview中render函数中的params对象 { row, index, column }
   * @on-cancel-edit 返回值 {Object} 同上
   * @on-save-edit 返回值 {Object} ：除上面三个参数外，还有一个value: 修改后的数据
   */
  data () {
    return {
      insideColumns: [
        {
          key: 'templateName',
          title: '考试试卷名称'
        },
        {
          key: 'subordinateToPlan',
          title: '是否月考'
        },
        {
          key: 'totalPoints',
          title: '是否小测'
        },
        {
          key: 'passingGrade',
          title: '考试开始时间'
        },
        {
          key: 'creator',
          title: '考试结束时间'
        },
        {
          key: 'Time',
          title: '考试时长'
        },
        {
          key: 'createTime',
          title: '考试创建时间'
        }
      ], // 表格列数据
      insideTableData: [
        {
          templateName: '考试试卷名称1',
          subordinateToPlan: '是否月考1',
          totalPoints: '是否小测1',
          passingGrade: '考试开始时间1',
          creator: '考试结束时间1',
          Time: '考试时长1',
          createTime: '考试创建时间1',
        },
        {
          templateName: '考试试卷名称2',
          subordinateToPlan: '是否月考2',
          totalPoints: '是否小测2',
          passingGrade: '考试开始时间2',
          creator: '考试结束时间2',
          Time: '考试时长2',
          createTime: '考试创建时间2',
        },
        {
          templateName: '考试试卷名称3',
          subordinateToPlan: '是否月考3',
          totalPoints: '是否小测3',
          passingGrade: '考试开始时间3',
          creator: '考试结束时间3',
          Time: '考试时长3',
          createTime: '考试创建时间3',
        }
      ], // 表格记录数据
      addTestPaperFlag: false, // 新增考试的弹窗标志
      formItem: {
        type: '',
        diff: '',
        content: '',
        answer: '',
        analysis:''
      },
    }
  },
  methods: {
    /* 新增考试的方法 */
    addTestPaperMethod () {

    }
  }
}
</script>
